import { useContext, useRef, useEffect, useState, memo } from 'react';
import { Input, Button, Divider, Skeleton } from 'antd';
import { SearchOutlined, CloseCircleFilled  } from '@ant-design/icons';
import { getTagList } from '@/services/appService';
import IndexStyle from '@/layouts/index.less';
import { useSelector } from '@/layouts/useSelector';

const SideBarInput = memo(({ list, onSearch })=>{
    const [value, setValue] = useState('');
    const timerRef = useRef(null);
    console.log('input render()...');
    useEffect(()=>{
        if ( value ) {
            clearTimeout(timerRef.current);
            timerRef.
            timerRef.current = setTimeout(()=>{
                console.log(list);
                let newArr;
                if ( value ) {
                   newArr = list.filter(i=>i.label.includes(value)); 
                } else {
                    newArr = [...list];
                }
                onSearch(newArr);
            }, 1000)
        }
    },[value])
    return (
        <div style={{ padding:'1rem' }}>
            <Input 
                value={value} 
                onChange={e=>setValue(e.target.value)} 
                prefix={<SearchOutlined />} 
                suffix={ value && <CloseCircleFilled />} 
                placeholder='Search...'
            />
        </div>    
    )
})

const SideBar = ()=>{
    const [tabList, dispatch] = useSelector(state=>state.tabList);
    const [currentTab] = useSelector(state=>state.currentTab);
    const [currentTag] = useSelector(state=>state.currentTag);
    const [searchList, setSearchList] = useState([]);
    const listRef = useRef();
    const info = tabList.filter(i=>i.key === currentTab)[0] ;
    useEffect(()=>{
        getTagList({ type:currentTab })
        .then(data=>{
            console.log(data);
            listRef.current = [{ label:'全部', key:'0' }].concat(data);
            setSearchList([{ label:'全部', key:'0' }].concat(data));
        })
    },[currentTab]);

    console.log('sideBar render...');
    // console.log(searchList);
    return (
        listRef.current && listRef.current.length 
        ?
        <div>
            <SideBarInput list={listRef.current} onSearch={arr=>setSearchList(arr)} />
            <div>
                <div style={{ padding:'1rem 2rem' }}>{ info.label + '商店首页' }</div>
                <div>
                    <div style={{ padding:'0 2rem', color:'rgba(0, 0, 0, 0.45)' }}>分类</div>
                    <Divider style={{ margin:'6px 0 0 0' }} />
                </div>
                <div className={IndexStyle['custom-list']}>
                    {
                        searchList.map((item)=>(
                            <div 
                                className={IndexStyle['custom-list-item'] + ' ' + ( item.key === currentTag ? IndexStyle['selected'] : '')} 
                                key={item.key}
                                onClick={()=>dispatch({ type:'setCurrentTag', payload:item.key })}
                            >
                                { item.label }
                            </div>
                        ))
                    }
                </div>
               
            </div>
        </div>
        :
        <Skeleton style={{ padding:'0 1rem 0 2rem' }} active />
    )
}

export default SideBar;